<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
    <!-- 引入 react 核心库-->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 引入 react-dom 用于支持操作 dom -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入 babel， 用于将jsx转为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .box{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <div id="objTem"></div>
    <script type="text/babel">
        const msg = 'Hello World';
        const VDOM = (
            <div>
                <p>字符串: {msg}</p>
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById('root'))


        const obj = {
            name :"tiger",
            age:10
        }

        const arrObj = [
            {
                id : 1,
                title : "Angular"
            },{
                id : 2,
                title : "React"
            },{
                id : 3,
                title : "Vue"
            }
        ]

        const arr = [1,2,3,4,5]
        const VDOM2 = (
            <div>
                <p>姓名: {obj.name}</p>
                <p>年龄: {obj.age}</p>
                {/* jsx 注释语法 */}
                {/* 三目运算符 */}
                <p>{3>2?'a':'b'}</p>
                {/* 方法定义 => 匿名调用 */}
                <p>{function demo(){return "hello world"}()}</p>

                {/* 数组 */}
                <ul>
                    {arr.map((item, k) => {
                        {/* 加上 key 值增加渲染速度 */}
                        return <li key={k}>{item}</li>
                        })
                    }
                </ul>

                <ul>
                    {/* 将 arrObj 的每一项title渲染出来，key值为每一项的id*/}
                    {arrObj.map((item, k) => { 
                        return <li key={item.id}>{item.title}</li>
                    })}
                </ul>

                <p className='box'>{msg}</p>
            </div>
        )
        ReactDOM.render(VDOM2, document.getElementById('objTem'))
    </script>
</body>
</html>